<template>
    <main-layout title="项目管理" :addBtn="true" @addClick="toEditPage">
        <ul class="listShow" @scroll="scrollEvt">
            <li class="project-item" v-for="item in projectList" :key="item.id">
                <span class="title">{{item.name}}</span>
                <span class="mainer">负责人：{{item.liableName}}</span>
                <span class="date">签订日期：{{item.signTime | df}}</span>
                <span class="address">地址：{{item.address}}</span>
                <div class="icon">
                    <i></i>
                    <i class="del"></i>
                </div>
            </li>
            <li>
                <span class="moreLoad" v-if="loading">加载中...</span>
                <span class="moreLoad" v-if="!loading && hasMore">上滑加载更多</span>
                <span class="moreLoad" v-if="!loading && !hasMore">到底了哦~</span>
            </li>
        </ul>
        
    </main-layout>
</template>

<script>
    
    import {getProjectListApi} from '../../apis/projectApi'
    export default {
        data() {
            return {
                projectList: [],
                loading: false, 
                hasMore: true,
                
                pages: {
                    name: '',
                    page: 1,
                    size: 5,
                }
                
            }
        },
        created() {
            this.getProjectList()
        },
        methods: {
            async getProjectList() {
                this.loading = true
                //判断有没有更多
                let result = await getProjectListApi(this.pages)
                // console.log('resultProduct',result)
                this.projectList = [...this.projectList,...result.data.rows]
                console.log(this.projectList)
                this.hasMore = result.data.total > this.projectList.length

                setTimeout(() => {
                 this.loading = false   
                });
            },
            scrollEvt(event){
                // console.log(event)
                // console.log(event.target.offsetHeight , event.target.scrollTop , event.target.scrollHeight)
                let isBottom = event.target.offsetHeight + event.target.scrollTop + 20 > event.target.scrollHeight
                if(!this.loading && this.hasMore && isBottom){
                    this.pages.page += 1
                    this.getProjectList()
                    // console.log()
                }

            },
            toEditPage(){
                this.$router.push({path: '/project/edit', query: {from: 'list'}})
            }
        },
        //过滤器
        filters: {
            df(values){
                let reDate = new Date(values),
                    yyyy = reDate.getFullYear(),
                    MM = reDate.getMonth()+1,
                    dd = reDate.getDate(),
                    hh = reDate.getHours(),
                    mm = reDate.getMinutes(),
                    ss = reDate.getSeconds()
                MM = MM > 9 ? MM : `0${MM}`
                dd = dd > 9 ? dd : `0${dd}`
                hh = hh > 9 ? hh : `0${hh}`
                mm = mm > 9 ? mm : `0${mm}`
                ss = ss > 9 ? ss : `0${ss}`
                return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
            }
        }
    }
</script>
    
<style lang="less" scoped>
    // @import '../..style/common.less';
    .listShow{
        display: block;
        position: relative;
        height: 100%;
        padding: 0 12px;
        overflow-x: hidden;
    }
    .project-item{
        display: block;
        position: relative;
        border-bottom: 1px solid #666;
        margin-top: 10px;
        padding-bottom: 6px;
        > .title{
            display: block;
            font-size: 1rem;
            line-height: 42px;
        }
        > .mainer,.date,.address{
            display: block;
            font-size: 14px;
            color: dimgray;
            line-height: 30px;
        }
        > .icon{
            display: block;
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -42px;

            > i{
                width: 36px;
                height: 36px;
                display: block;
                background: url('../../image/edit-icon.png') center center /32px 32px no-repeat;
                &.del{
                    background-image: url('../../image/close-icon.png');
                    margin-top: 6px;
                }
            }

        }
    }
    .moreLoad{
            display: block;
            font-size: .7rem;
            color: gray;
            text-align: center;
            line-height: 20px;
        }
</style>